<template>
    <div class="tab">
        <div class="tab_title">
            <div :class="{active:active==0}"  @click="active=0">讲师介绍</div>
            <div :class="{active:active==1}"  @click="active=1">主讲课程</div>
            <div :class="{active:active==2}"  @click="active=2">学员评价</div>
        </div>
        <div class="tab_con">
            <div v-show="active==0">讲师介绍</div>
            <div v-show="active==1">主讲课程</div>
            <div v-show="active==2">学员评价</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0
        }
    }
}
</script>
<style lang="scss" scoped>
.tab {
    .tab_title {
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .active {
        color: rgb(235, 97, 0);
        border-bottom: 3px solid rgb(235, 97, 0);
    }
}
</style>


